<%--
    Document   : generarCalendarioGuardias
    Created on : 17/11/2010, 10:56:10 AM
    Author     : yngrdyn
--%>


<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript'>

    $(document).ready(function() {
        $('#external-events div.external-event').each(function() {

            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };

            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });

        });


        /* initialize the calendar
                -----------------------------------------------------------------*/
        $('#calendar').fullCalendar({
            header: {
                left: '',
                center: '',
                right: ''
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function(date, allDay) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');

                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }

            }
        });

    });

</script>
<style type='text/css'>

    #AlineacionCalendario {
        width: 700px;
        margin: 0 auto;
    }

    #external-events {
        float: left;
        width: 60px;
        padding: 10px 10px;
        border-spacing: 10px;
        text-align: center;
    }

    #external-events h4 {
        font-size: 16px;
        margin-top: 20px;
        padding-top: 1em ;
    }
    #Grupos{
        font-size: 16px;
        margin-top: 20px;
        padding-top: 1em ;
    }

    .external-event { /* try to mimick the look of a real event */
                      margin: 10px 0;
                      padding: 2px 4px;
                      background: #3366CC;
                      color: #fff;
                      font-size: .85em;
                      cursor: pointer;
    }

    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }

    #external-events p input {
        margin: 0;
        vertical-align: middle;
    }

    #calendar {
        float: right;
        width: 600px;
    }

    .fc,
    .fc .fc-header,
    .fc .fc-content {
        font-size: 1em;
    }

    .fc {
        direction: ltr;
        text-align: left;
    }

    .fc table {
        border-collapse: collapse;
        border-spacing: 10px;
    }

    .fc td, .fc th {
        padding: 0;
        vertical-align: top;
    }



    /* Header
    ------------------------------------------------------------------------*/

    table.fc-header {
        width: 100%;
    }

    .fc-header-left {
        width: 25%;
    }

    .fc-header-left table {
        float: left;
    }

    .fc-header-center {
        width: 50%;
        text-align: center;
    }

    .fc-header-center table {
        margin: 0 auto;
    }

    .fc-header-right {
        width: 25%;
    }

    .fc-header-right table {
        float: right;
    }

    .fc-header-title {
        margin-top: 10px;
        white-space: nowrap;
    }

    .fc-header-space {
        padding-left: 10px;
    }

    /* right-to-left */

    .fc-rtl .fc-header-title {
        direction: rtl;
    }



    /* Buttons
    ------------------------------------------------------------------------*/



    /* Content Area & Global Cell Styles
    ------------------------------------------------------------------------*/

    .fc-widget-content {
        border: 1px solid #ccc; /* outer border color */
    }

    .fc-content {
        clear: both;
    }

    .fc-content .fc-state-default {
        border-style: solid;
        border-color: #ccc; /* inner border color */
    }

    .fc-content .fc-not-today { /* override jq-ui highlight (TODO: ui-widget-content) */
                                background: none;
    }

    .fc-cell-overlay { /* semi-transparent rectangle while dragging */
                       background: #9cf;
                       opacity: .2;
                       filter: alpha(opacity=20); /* for IE */
    }

    .fc-view { /* prevents dragging outside of widget */
               width: 100%;
               overflow: hidden;
    }





    /* Global Event Styles
    ------------------------------------------------------------------------*/

    .fc-event,
    .fc-agenda .fc-event-time,
    .fc-event a {
        border-style: solid;
        border-color: #36c;     /* default BORDER color (probably the same as background-color) */
        background-color: #36c; /* default BACKGROUND color */
        color: #fff;            /* default TEXT color */
    }

    /* Use the 'className' CalEvent property and the following
	 * example CSS to change event color on a per-event basis:
	 *
	 * .myclass,
	 * .fc-agenda .myclass .fc-event-time,
	 * .myclass a {
	 *     background-color: black;
	 *     border-color: black;
	 *     color: red;
	 *     }
	 */

    .fc-event {
        text-align: left;
    }

    .fc-event a {
        overflow: hidden;
        font-size: .85em;
        text-decoration: none;
        cursor: pointer;
    }

    .fc-event-editable {
        cursor: pointer;
    }

    .fc-event-time,
    .fc-event-title {
        padding: 0 1px;
    }

    /* for fake rounded corners */

    .fc-event a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* right-to-left */

    .fc-rtl .fc-event a {
        text-align: right;
    }

    /* resizable */

    .fc .ui-resizable-handle {
        display: block;
        position: absolute;
        z-index: 99999;
        border: 0 !important; /* important overrides pre jquery ui 1.7 styles */
        background: url() !important; /* hover fix for IE */
    }



    /* Horizontal Events
    ------------------------------------------------------------------------*/

    .fc-event-hori {
        border-width: 1px 0;
        margin-bottom: 1px;
    }

    .fc-event-hori a {
        border-width: 0;
    }

    /* for fake rounded corners */

    .fc-content .fc-corner-left {
        margin-left: 1px;
    }

    .fc-content .fc-corner-left a {
        margin-left: -1px;
        border-left-width: 1px;
    }

    .fc-content .fc-corner-right {
        margin-right: 1px;
    }

    .fc-content .fc-corner-right a {
        margin-right: -1px;
        border-right-width: 1px;
    }

    /* resizable */

    .fc-event-hori .ui-resizable-e {
        top: 0           !important; /* importants override pre jquery ui 1.7 styles */
        right: -3px      !important;
        width: 7px       !important;
        height: 100%     !important;
        cursor: e-resize;
    }

    .fc-event-hori .ui-resizable-w {
        top: 0           !important;
        left: -3px       !important;
        width: 7px       !important;
        height: 100%     !important;
        cursor: w-resize;
    }

    .fc-event-hori .ui-resizable-handle {
        _padding-bottom: 14px; /* IE6 had 0 height */
    }




    /* Month View, Basic Week View, Basic Day View
    ------------------------------------------------------------------------*/

    .fc-grid table {
        width: 100%;
    }

    .fc .fc-grid th {
        border-width: 0 0 0 1px;
        text-align: center;
    }

    .fc .fc-grid td {
        border-width: 1px 0 0 1px;
    }

    .fc-grid th.fc-leftmost,
    .fc-grid td.fc-leftmost {
        border-left: 0;
    }

    .fc-grid .fc-day-number {
        float: right;
        padding: 0 2px;
    }

    .fc-grid .fc-other-month .fc-day-number {
        opacity: 0.3;
        filter: alpha(opacity=30); /* for IE */
        /* opacity with small font can sometimes look too faded
	   might want to set the 'color' property instead
	   making day-numbers bold also fixes the problem */
    }

    .fc-grid .fc-day-content {
        clear: both;
        padding: 2px 2px 0; /* distance between events and day edges */
    }

    /* event styles */

    .fc-grid .fc-event-time {
        font-weight: bold;
    }

    /* right-to-left */

    .fc-rtl .fc-grid {
        direction: rtl;
    }

    .fc-rtl .fc-grid .fc-day-number {
        float: left;
    }

    .fc-rtl .fc-grid .fc-event-time {
        float: right;
    }



    /* Vertical Events
    ------------------------------------------------------------------------*/

    .fc-event-vert {
        border-width: 0 1px;
    }

    .fc-event-vert a {
        border-width: 0;
    }

    /* for fake rounded corners */

    .fc-content .fc-corner-top {
        margin-top: 1px;
    }

    .fc-content .fc-corner-top a {
        margin-top: -1px;
        border-top-width: 1px;
    }

    .fc-content .fc-corner-bottom {
        margin-bottom: 1px;
    }

    .fc-content .fc-corner-bottom a {
        margin-bottom: -1px;
        border-bottom-width: 1px;
    }

    /* event content */

    .fc-event-vert span {
        display: block;
        position: relative;
        z-index: 2;
    }

    .fc-event-vert span.fc-event-time {
        white-space: nowrap;
        _white-space: normal;
        overflow: hidden;
        border: 5px;
        font-size: 10px;
    }

    .fc-event-vert span.fc-event-title {
        line-height: 13px;
    }

    .fc-event-vert span.fc-event-bg {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: .3;
        filter: alpha(opacity=30);
    }

    /* resizable */

    .fc-event-vert .ui-resizable-s {
        bottom: 0        !important;
        width: 100%      !important;
        height: 8px      !important;
        line-height: 8px !important;
        font-size: 11px  !important;
        font-family: monospace;
        text-align: center;
        cursor: s-resize;
    }



</style>

<h1 class="title">Gestión de Guardias</h1>
<p class="meta"></p>
<h2>Modificar Patrón de Guardias</h2>
<br>
Sede: <bean:write name="generarCalendarioGuardiaForm" property="idSede"/>
<input id="RESULT" type="hidden" value="">

<center>
    <html:form action="/generarCalendarioGuardiaSede" styleId="generarCalendarioGuardiaSedeForm" onsubmit="return sendForm('generarCalendarioGuardiaSedeForm','generarCalendarioGuardiaSede','center');" >
        <div id='AlineacionCalendario'>
            <div id='external-events'>
                <h4 id ="Grupos">Grupos</h4>
                <script type="text/javascript">
                    $.getJSON("consultarGrupos.do", {sede:'${generarCalendarioGuardiaForm.idSede}'},
                    function(data) {
                        $.each(data.Grupos, function(i,item){
                            var string ="<div class='external-event'>"+item.id_grupo+"</div>";
                            $('#external-events').append(string);
                        });
                    });
                </script>
            </div>
        </div>
        <td>
            <h2 class='fc-header-title'>Calendario Base</h2></td>
        <br>
        <div id='calendar'></div>
        <br>

        <div style='clear:both'></div>
        <br><html:submit value = "Guardar Cambios"></html:submit><br>
        <br>
        <font color="red"><p>NOTA: Una vez realizada est&aacute; modificaci&oacute;n no podr&aacute;n recuperarse los datos.</p></font>
        <br>
    </html:form>
    <br><html:errors property = "asignacion_exitosa"/>
</center>
